<template>
  <view class="main u-p-20">
    <u-navbar title="生产预测" :title-bold="true" title-color="#000"></u-navbar>
    <view>
      <u-input
        v-model="year"
        type="select"
        :select-open="yearShow"
        @click="yearShow = true"
        class="mine-input"
      />
      <u-picker
        mode="time"
        v-model="yearShow"
        :params="yearParams"
        @confirm="yearConfirm"
      ></u-picker>
    </view>
    <view class="box" v-show="!revolveFlag">
      <view class="calline">原煤产量统计</view>
      <view class="u-flex-1">
        <qiun-data-charts
          type="line"
          :eopts="ymopts"
          :echartsH5="true"
          :echartsApp="true"
          :chartData="ymchartData"
          v-if="ymchartData"
        />
      </view>
      <view class="revolve">
        <u-image
          src="/static/image/icon-hp.png"
          width="50rpx"
          height="50rpx"
          @click="bigChart(1)"
        ></u-image>
      </view>
    </view>
    <view class="box" v-show="!revolveFlag">
      <view class="calline">掘进进尺统计</view>
      <view class="u-flex-1">
        <qiun-data-charts
          type="line"
          :eopts="jjopts"
          :echartsH5="true"
          :echartsApp="true"
          :chartData="jjchartData"
          v-if="jjchartData"
        />
      </view>
      <view class="revolve">
        <u-image
          src="/static/image/icon-hp.png"
          width="50rpx"
          height="50rpx"
          @click="bigChart(2)"
        ></u-image>
      </view>
    </view>
    <view class="revolveBox" v-show="revolveFlag">
      <view class="chart-title">{{ mineTitle }}</view>
      <qiun-data-charts
        type="line"
        :eopts="eopts"
        :chartData="revolveData"
        :echartsH5="true"
        :echartsApp="true"
        v-if="revolveData"
      />
      <view class="closeicon">
        <u-image
          src="/static/image/icon-nohp.png"
          width="50rpx"
          height="50rpx"
          @click="close"
        ></u-image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mineTitle: "",
      ymchartData: {},
      jjchartData: {},
      yearParams: {
        year: true,
      },
      revolveData: {},
      searchData: {
        countyStr: "",
        customerStr: "",
        customerNo: "",
        customerName: "",
        customerCode: "",
      },
      yearShow: false,
      mineList: [],
      revolveFlag: false,
      ymopts: {
        title: {
          text: "万吨",
          textStyle: {
            fontSize: 12,
          },
        },
        legend: {
          left: "30%",
          bottom: "-60",
          // orient: "vertical",
          icon: "circle",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "30",
          containLabel: true,
        },

        color: [
          "#0acf97",
          "#3d5fff",
          "#0EECF1",
          "#ffff00",
          "#ffa500",
          "#0000FF",
          "#C43CC4",
          "#9400d3",
          "#9f79ee",
          "#696969",
          "#ff00ff",
          "#bdb76b",
          "#006400",
          "#00bfff",
          "#66cd00",
          "#8b8989",
          "#ff1493",
        ],
        tooltip: {
          trigger: "axis",
          show: true,
          backgroundColor: "#ffffff",
          triggerOn: "mousemove|click",
          borderColor: "#288CFE",
          borderWidth: 1,
          padding: [5, 10],
          extraCssText:
            "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);Opacity: 1;z-index:999;",
          textStyle: {
            color: "#666666",
          },
        },
        xAxis: {
          type: "value", //数据
          type: "category",
          splitLine: {
            lineStyle: {
              type: "dashed", //虚线
            },
          },
          // scale: true, //是否是脱离 0 值比例
        },
        yAxis: {
          // type: "value", //数据
          // minInterval: 1,
          axisLine: {
            lineStyle: {
              color: "#666666",
            },
          },
          // type: "category",
        },
      },
      jjopts: {
        title: {
          text: "米",
          // textAlign: "center",
          // top: "8%",
          // right: "7%",
          textStyle: {
            fontSize: 12,
          },
        },

        legend: {
          left: "30%",
          bottom: "-60",
          // orient: "vertical",
          icon: "circle",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "30",
          containLabel: true,
        },

        color: [
          "#0acf97",
          "#3d5fff",
          "#0EECF1",
          "#ffff00",
          "#ffa500",
          "#0000FF",
          "#C43CC4",
          "#9400d3",
          "#9f79ee",
          "#696969",
          "#ff00ff",
          "#bdb76b",
          "#006400",
          "#00bfff",
          "#66cd00",
          "#8b8989",
          "#ff1493",
        ],
        tooltip: {
          trigger: "axis",
          show: true,
          backgroundColor: "#ffffff",
          triggerOn: "mousemove|click",
          borderColor: "#288CFE",
          borderWidth: 1,
          padding: [5, 10],
          extraCssText:
            "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);Opacity: 1;z-index:999;",
          textStyle: {
            color: "#666666",
          },
        },
        xAxis: {
          type: "value", //数据
          type: "category",
          splitLine: {
            lineStyle: {
              type: "dashed", //虚线
            },
          },
          // scale: true, //是否是脱离 0 值比例
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#666666",
            },
          },
          // type: "category",
        },
      },
      eopts: {
        title: {
          text: "",
          textAlign: "center",
          top: "8%",
          right: "7%",
          rotate: -90,
          textStyle: {
            fontSize: 12,
          },
        },
        legend: {
          rotation: -90,
          left: "10%",
          top: "center",
          orient: "vertical",
          icon: "circle",
        },
        grid: {
          left: "35%",
          right: "70",
          top: "30",
        },
        color: [
          "#0acf97",
          "#3d5fff",
          "#0EECF1",
          "#ffff00",
          "#ffa500",
          "#0000FF",
          "#C43CC4",
          "#9400d3",
          "#9f79ee",
          "#696969",
          "#ff00ff",
          "#bdb76b",
          "#006400",
          "#00bfff",
          "#66cd00",
          "#8b8989",
          "#ff1493",
        ],
        tooltip: {
          trigger: "axis",
          show: true,
          backgroundColor: "#ffffff",
          triggerOn: "mousemove|click",
          borderColor: "#288CFE",
          borderWidth: 1,
          padding: [5, 10],
          extraCssText:
            "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);Opacity: 1;z-index:999;transform: rotate(90deg);",
          textStyle: {
            color: "#666666",
          },
        },
        xAxis: {
          type: "value", //数据
          position: "top", //x 轴的位置【top bottom】
          nameRotate: -90, //坐标轴名字旋转，角度值。
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            rotate: 90, //刻度标签旋转的角度，
          },
          splitLine: {
            lineStyle: {
              type: "dashed", //虚线
            },
          },
          // scale: true, //是否是脱离 0 值比例
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#666666",
            },
          },
          type: "category",
          inverse: "true", //是否是反向坐标轴。
          axisLabel: { rotate: -90 },
        },
        visualMap: [],
      },
      year: "",
      ymchartFlag: false,
      jjchartFlag: false,
    };
  },
  methods: {
    close() {
      this.revolveFlag = false;
      this.ymchartFlag = false;
      this.jjchartFlag = false;
      this.revolveData = {};
      this.jjchartData = {};
      this.ymchartData = {};
      this.getData();
    },

    async getData() {
      let url = "/mobile/excavation/statistics/getProducePredict";
      const { customerCode, customerName } = this.searchData;
      let params = {
        customerId: customerCode,
        customerName: customerName,

        year: this.year,
      };
      const res = await this.$post(url, params);
      if (res.body) {
        let ymobj = {
          categories: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          series: [
            {
              name: "实际产量",
              data: [],
              label: { show: false },
            },
            {
              name: "预测产量",
              data: [],
              label: { show: false },
            },
          ],
        };
        let jjobj = {
          categories: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          series: [
            {
              name: "实际进尺",
              data: [],
              label: { show: false },
            },
            {
              name: "预测进尺",
              data: [],
              label: { show: false },
            },
          ],
        };
        res.body.forEach((item) => {
          ymobj.series[0].data.push(item.produceCoalYield);
          ymobj.series[1].data.push(item.predictCoalYield);
          jjobj.series[0].data.push(item.produceDrivingLength);
          jjobj.series[1].data.push(item.predictDrilling);
        });
        this.jjchartData = JSON.parse(JSON.stringify(jjobj));
        this.ymchartData = JSON.parse(JSON.stringify(ymobj));
      }
    },
    async yearConfirm(e) {
      this.year = e.year;
      await this.getData();
      if (this.ymchartFlag) {
        this.bigChart(1);
      } else if (this.jjchartFlag) {
        this.bigChart(2);
      }
    },
    bigChart(e, t) {
      this.revolveFlag = true;
      console.log(e, "eee");
      if (e == 1) {
        this.eopts.title.text = "万吨";
        this.mineTitle = "原煤产量统计";
        this.revolveData = this.ymchartData;
        this.ymchartFlag = true;
      } else if (e == 2) {
        this.eopts.title.text = "米";
        this.mineTitle = "掘进进尺统计";
        this.revolveData = this.jjchartData;
        this.jjchartFlag = true;
      }
    },
  },

  onLoad() {
    this.year = new Date().getFullYear();
    this.getData();
  },
};
</script>

<style>
.mine-input {
  margin-top: 8rpx;
  padding-left: 20rpx !important;
}
.box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 10rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.revolveBox {
  width: 100%;
  height: 1360rpx;
  background-color: #fff;
  border-radius: 10rpx;
  position: relative;
  margin-top: 20rpx;
}
#charts {
  width: 100%;
  height: 100%;
}
.calline {
  text-align: center;
  font-weight: 700;
  color: #4565ff;
}
.revolve {
  position: absolute;
  right: 3%;
  bottom: 2px;
}
.chart-title {
  position: absolute;
  right: -350rpx;
  width: 770rpx;
  top: 50%;
  text-align: center;
  transform: rotate(90deg);
  font-weight: 700;
  color: #4565ff;
}
.closeicon {
  position: absolute;
  right: 2%;
  bottom: 2%;
}
</style>